import React, { Component } from "react";

import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons";

import { Layout, Menu, Button, Modal, Space, message } from "antd";
// 引入 link 导航组件
import { Link } from "react-router-dom";
// 引入组件样式
import "@/assets/css/dashboard.css";
// 引入二级路由坑及匹配规则
import Admin from "../../router/Admin";
// 引入url
import url from "@/config/url";
// 引入axios
import axios from "@/http/http";
// 引入cookie
import Cookies from "js-cookie";

const { confirm } = Modal;
const { Header, Sider, Content } = Layout;

// 获取登录时本地存的菜单权限数组
const navList = JSON.parse(localStorage.getItem("acl"));
// console.log(navList);
// 定义函数,作用用来返回菜单项数组中的每一个对象结构
function getItem(label, key, icon, children) {
  return {
    key,
    icon,
    children,
    label,
  };
}

const items = [
  // getItem('Option 1', '1', <PieChartOutlined />),
  // getItem('Option 2', '2', <DesktopOutlined />),
  // getItem('User', 'sub1', <UserOutlined />, [
  //     getItem('Tom', '3'),
  //     getItem('Bill', '4'),
  //     getItem('Alex', '5'),
  // ]),
  // getItem('Team', 'sub2', <TeamOutlined />, [getItem('Team 1', '6'), getItem('Team 2', '8')]),
  // getItem('Files', '9', <FileOutlined />),
];

// 将navList 菜单项揉和到 items 数组中,这样items 再给 组件属性中的items 赋值即可
if (navList) {
  navList.map((item) => {
    //判断是否有子菜单
    if (item.children.length != 0) {
      items.push(
        getItem(
          item.auth_name,
          item.auth_path,
          <UserOutlined />,
          item.children.map((item1) => {
            if (item1.is_nav == 1) {
              //  map 遍历 return 返回值就是新数组的每一项
              return getItem(
                <Link to={item1.auth_path}> {item1.auth_name} </Link>,
                item1.auth_path,
                <UploadOutlined />
              );
            }
          })
        )
      );
    } else {
      items.push(
        getItem(
          <Link to={item.auth_path}> {item.auth_name} </Link>,
          item.auth_path,
          <UserOutlined />
        )
      );
    }
  });
}

class Dashboard extends Component {
  constructor(props) {
    super(props);
    // 调用用户登录验证接口,如果接口返回错误,则表示未登录,重新返回登录页
    axios.get(url.precheck).then((res) => {
      {
        /* console.log(res) */
      }
      if (res.data.errNo === 0) {
        // 表示登录验证通过
        this.setState({
          islogin: true,
        });
      } else {
        // 登录验证不通过
        this.setState({
          islogin: false,
        });
        message.error("请先登录", 1, () => {
          props.history.push("/login");
        });
      }
    });
  }

  state = {
    collapsed: false, // 折叠属性 false 不折叠
    accountInfo: {}, // 当前账户信息
    islogin: false, // 当前的登录状态  // fasle 表示未登录
  };
  // 设置是否折叠
  setCollapsed = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };
  // 以类成员属性的方式定义该变量
  defaultSelectedKeys = [this.props.location.pathname];
  // 初始展开的 SubMenu 菜单项 key 数组
  defaultOpenKeys = [
    this.props.location.pathname.substr(
      0,
      this.props.location.pathname.lastIndexOf("/")
    ),
  ];
  render() {
    {
      /* console.log(this); */
    }
    const { collapsed, accountInfo, islogin } = this.state;
    return islogin ? (
      <Layout>
        <Sider trigger={null} collapsible collapsed={collapsed}>
          <div className="logo">
            <img src="http://oa.1000phone.net/Public/assets/css/images/logo.png?1657596597" />
          </div>{" "}
          <Menu
            theme="dark"
            mode="inline"
            defaultOpenKeys={this.defaultOpenKeys}
            defaultSelectedKeys={this.defaultSelectedKeys}
            items={items}
          />{" "}
        </Sider>
        <Layout className="site-layout">
          <Header
            className="site-layout-background"
            style={{
              padding: 0,
            }}
          >
            {" "}
            {React.createElement(
              collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
              {
                className: "trigger",
                onClick: () => this.setCollapsed(),
              }
            )}
            <span>
              hello,{accountInfo.username}/{accountInfo.role}
            </span>
            <span className="loginout" onClick={this.loginoutFn}>
              注销登录
            </span>
          </Header>
          <Content
            className="site-layout-background"
            style={{
              margin: "24px 16px",
              padding: 24,
              minHeight: 280,
            }}
          >
            {/*二级路由组件存放的坑 */}
            <Admin></Admin>
          </Content>
        </Layout>
      </Layout>
    ) : (
      <></>
    );
  }
  componentDidMount() {
    {
      /* 进行用户信息接口调用 */
    }
    axios
      .get(url.getmyinfo)
      .then((res) => {
        {
          /* console.log(res) */
        }
        this.setState(() => {
          return {
            accountInfo: res.data.accountInfo,
          };
        });
      })
      .catch((e) => {});
  }
  loginoutFn = () => {
    //弹出提示框
    confirm({
      title: "提示",
      icon: <ExclamationCircleOutlined />,
      content: "确认要退出当前账号吗?",
      onOk: () => {
        // 清除本地存储的内容
        Cookies.remove("jwt");
        localStorage.removeItem("acl");
        // 返回到登录页
        message.success("退出成功", 1, () => {
          this.props.history.push("/login");
        });
      },
      onCancel() {
        console.log("Cancel");
      },
    });
  };
}

export default Dashboard;
